  <template>
  <div id="buspagedesigner">
    <Breadcrumb :content="content"></Breadcrumb>
    <div class="bodyContent">
      <Splitpanes>
        <Pane size="15">
          <div style="height: calc(100vh - 115px); overflow-y: hidden" class="mytable-scrollbar">
            <vxe-table ref="xTreeModuleMenuRef" border="inner" height="auto" :column-config="{ resizable: true }" :row-config="{ isCurrent: true }" :tree-config="{}" :data="moduleMenuList" @cell-click="treeCellClick">
              <vxe-column field="title" title="模块菜单" tree-node></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <Pane size="85">
          <div>
            <vxe-toolbar perfect>
              <template #buttons>
                <div class="padding-tb-xs margin-bottom-xs">
                  <span class="text-bold margin-right-xs">当前配置:</span>
                  <!-- <span v-if="path1" class="text-bold margin-right-xs text-red">{{
                    path1 ? path1 : ''
                  }}</span> -->
                  <!-- <span v-if="path2">/</span> -->
                  <span v-if="path2" class="text-bold margin-right-xs text-orange">{{
                    path2 ? path2 : ''
                  }}</span>
                  <span v-if="path3">/</span>
                  <span v-if="path3" class="text-bold margin-right-xs text-blue">{{
                    path3 ? path3 : ''
                  }}</span>
                </div>
              </template>
              <template #tools>
                <vxe-button type="text" content="添加组" class="button-blue margin-left-xs" @click="openTabDialog"></vxe-button>
                <vxe-button type="text" content="保存" class="button-blue margin-left-xs" @click="saveTab"></vxe-button>
              </template>
            </vxe-toolbar>
          </div>
          <el-tabs v-if="dataStruct && dataStruct.length > 0" v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab" @tab-change="tabChange">
            <el-tab-pane v-for="item in dataStruct" :key="item.tabValue" :label="`${item.tabKey} ${item.tabTitle}`" :name="item.tabValue">
              <Splitpanes style="height: 100%">
                <Pane size="10">
                  <div class="padding-lr-xs">
                    <vxe-button type="text" content="输入框" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('input')"></vxe-button>
                    <vxe-button type="text" content="数值框" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('integer')"></vxe-button>
                    <vxe-button type="text" content="日期选择" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('date')"></vxe-button>
                    <vxe-button type="text" content="复选框" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('checkbox')"></vxe-button>
                    <vxe-button type="text" content="复选框组" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('checkboxgroup')"></vxe-button>
                    <vxe-button type="text" content="单选按钮组" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('radiogroup')"></vxe-button>
                    <vxe-button type="text" content="开关按钮" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('switch')"></vxe-button>
                    <vxe-button type="text" content="下拉选择" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('select')"></vxe-button>
                    <vxe-button type="text" content="文本域" class="button-blue margin-tb-xs" style="width: 100%" @click="addFormItem('textarea')"></vxe-button>
                  </div>
                </Pane>
                <Pane size="55">
                  <div class="padding-lr-xs">
                    <vxe-form :data="item.formData">
                      <vxe-form-item class="padding-lr-xs" :class-name="formItm.isCurrent ? 'dashed lines-orange bg-blue light' : ''" :align="formItm.align" :title="formItm.title" :field="formItm.field" :title-width="formItm.titleWidth" :title-colon="formItm.titleColon === 1" :title-asterisk="formItm.titleAsterisk === 1" :title-overflow="formItm.titleOverflow === 1" :show-title="formItm.showTitle === 1" :title-align="formItm.titleAlign" :vertical="formItm.vertical === 1" :content-class-name="formItm.contentClassName" :visible="formItm.visible === 1" :span="formItm.span" v-for="(formItm, formIdx) in item.formObj.formItems" :key="formIdx">
                        <template #title>
                          <div @click="formItemCLick(formItm, formIdx)">
                            <span class="padding-left-xs">{{
                              `${formItm.fieldCode} ${formItm.title}`
                            }}</span>
                          </div>
                        </template>
                        <template #default="params">
                          <div @click="formItemCLick(formItm, formIdx)">
                            <vxe-input v-if="formItm.compType === 'input'" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                            <vxe-input v-if="formItm.compType === 'date' || formItm.compType === 'datetime'" :type="formItm.compType === 'date' ? 'date' : 'datetime'" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                            <vxe-checkbox-group v-if="formItm.compType === 'checkboxgroup'" @click="changeEvent(params)">
                              <vxe-checkbox :label="itm.label" :content="itm.content" v-for="(itm, idx) in formItm.fieldOptions" :key="idx"></vxe-checkbox>
                            </vxe-checkbox-group>
                            <vxe-radio-group v-if="formItm.compType === 'radiogroup'">
                              <vxe-radio :label="itm.label" :content="itm.content" v-for="(itm, idx) in formItm.fieldOptions" :key="idx"></vxe-radio>
                            </vxe-radio-group>
                            <vxe-checkbox v-if="formItm.compType === 'checkbox'"></vxe-checkbox>
                            <vxe-input v-if="formItm.compType === 'integer'" type="integer" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                            <vxe-switch v-if="formItm.compType === 'switch'" open-value="1" close-value="0"></vxe-switch>
                            <vxe-select v-if="formItm.compType === 'select'" placeholder="请选择">
                              <vxe-option v-for="(itm, idx) in formItm.fieldOptions" :key="idx" :value="itm.label" :label="itm.content"></vxe-option>
                            </vxe-select>
                            <vxe-textarea v-if="formItm.compType === 'textarea'" placeholder="请输入"></vxe-textarea>
                          </div>
                        </template>
                      </vxe-form-item>
                    </vxe-form>
                  </div>
                </Pane>
                <Pane size="35">
                  <el-tabs type="border-card">
                    <el-tab-pane label="基本属性">
                      <div class="padding-lr-xs">
                        <vxe-form title-width="90" v-if="item.formObj.formItems[item.editFormItemIndex]" ref="formRef" :data="
                            dataStruct[editableTabsValue].formObj.formItems[
                              dataStruct[editableTabsValue].editFormItemIndex
                            ]
                          " title-align="right">
                          <vxe-form-item title="编号" field="fieldCode" span="24">
                            <template #default="params">
                              <vxe-input v-model="params.data.fieldCode" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="属性名" field="field" span="24">
                            <template #default="params">
                              <vxe-input v-model="params.data.field" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="标题" field="title" span="24">
                            <template #default="params">
                              <vxe-input v-model="params.data.title" placeholder="请输入" clearable @change="changeEvent(params)"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="占比" field="span" span="24">
                            <template #default="params">
                              <vxe-input type="integer" v-model="params.data.span" placeholder="请输入0-24" clearable @change="changeEvent(params)" min="1" max="24"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="标题宽度" field="titleWidth" span="24">
                            <template #default="params">
                              <vxe-input type="integer" v-model="params.data.titleWidth" placeholder="请输入0-200" clearable @change="changeEvent(params)" min="1" max="200">
                                <template #suffix>
                                  <span>px</span>
                                </template>
                              </vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="顺序号" field="fieldSeq" span="24">
                            <template #default="params">
                              <vxe-input type="number" v-model="params.data.fieldSeq" placeholder="请输入" clearable @change="sortAgain"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <!-- <vxe-form-item title="标题内容过长时显示省略号" title-overflow field="titleOverflow" span="24">
                        <template #default="params">
                          <vxe-checkbox v-model="params.data.titleOverflow"></vxe-checkbox>
                        </template>
                      </vxe-form-item> -->
                          <!-- <vxe-form-item title="是否显示标题" title-overflow field="showTitle" span="24">
                            <template #default="params">
                              <vxe-checkbox v-model="params.data.showTitle" :checked-value="1" :unchecked-value="0"></vxe-checkbox>
                            </template>
                          </vxe-form-item> -->
                          <!-- <vxe-form-item title="标题对齐方式" field="titleAlign" span="24" :item-render="{}" title-overflow>
                            <template #default="params">
                              <vxe-select v-model="params.data.titleAlign" placeholder="请选择标题对齐方式" clearable @change="changeEvent(params)">
                                <vxe-option value="left" label="左"></vxe-option>
                                <vxe-option value="center" label="中"></vxe-option>
                                <vxe-option value="right" label="右"></vxe-option>
                              </vxe-select>
                            </template>
                          </vxe-form-item> -->
                          <!-- <vxe-form-item title="内容对齐方式" field="align" span="24" :item-render="{}" title-overflow>
                            <template #default="params">
                              <vxe-select v-model="params.data.align" placeholder="请选择内容对齐方式" clearable @change="changeEvent(params)">
                                <vxe-option value="left" label="左"></vxe-option>
                                <vxe-option value="center" label="中"></vxe-option>
                                <vxe-option value="right" label="右"></vxe-option>
                              </vxe-select>
                            </template>
                          </vxe-form-item> -->
                          <vxe-form-item v-if="
                              item.formObj.formItems[item.editFormItemIndex] &&
                              item.formObj.formItems[item.editFormItemIndex].compType &&
                              (item.formObj.formItems[item.editFormItemIndex].compType ===
                                'select' ||
                                item.formObj.formItems[item.editFormItemIndex].compType ===
                                  'radiogroup' ||
                                item.formObj.formItems[item.editFormItemIndex].compType ===
                                  'checkboxgroup')
                            " title="数据来源" field="fieldSource" span="24" :item-render="{}" title-overflow>
                            <template #default="params">
                              <vxe-select v-model="params.data.fieldSource" placeholder="请选择数据来源" clearable @change="changeEvent(params)">
                                <vxe-option value="1" label="字典"></vxe-option>
                                <vxe-option value="2" label="业务表"></vxe-option>
                                <vxe-option value="3" label="固定数组"></vxe-option>
                              </vxe-select>
                            </template>
                          </vxe-form-item>
                        </vxe-form>
                        <!-- <vxe-form title-width="80px" ref="formRef" :data="dataStruct[editableTabsValue].formObj.formItems[dataStruct[editableTabsValue].editFormItemIndex]">
                      <vxe-form-item :title="op.title" :field="op.field" :span="op.span" v-for="(op,ii) in dataStruct[editableTabsValue].formObj.formItems[dataStruct[editableTabsValue].editFormItemIndex]" :key="ii">
                        <template #default="params">
                          <vxe-input type="integer" v-model="params.data.name" placeholder="请输入0-200" clearable @change="changeEvent(op)" min="1" max="200">
                          </vxe-input>
                        </template>
                      </vxe-form-item>
                    </vxe-form> -->
                        <vxe-toolbar v-if="
                            item.formObj.formItems[item.editFormItemIndex] &&
                            item.formObj.formItems[item.editFormItemIndex].compType &&
                            (item.formObj.formItems[item.editFormItemIndex].compType === 'select' ||
                              item.formObj.formItems[item.editFormItemIndex].compType ===
                                'radiogroup' ||
                              item.formObj.formItems[item.editFormItemIndex].compType ===
                                'checkboxgroup')
                          " perfect class-name="bg-gray">
                          <template #buttons>
                            <span class="text-bold">可取值</span>
                          </template>
                          <template #tools>
                            <vxe-button type="text" class="button-red deleteValueBtn" content="删除" @click="removeSelectRowEvent"></vxe-button>
                            <vxe-button type="text" class="button-blue" content="添加" @click="insertEvent"></vxe-button>
                          </template>
                        </vxe-toolbar>
                        <div v-if="
                            item.formObj.formItems[item.editFormItemIndex] &&
                            item.formObj.formItems[item.editFormItemIndex].compType &&
                            (item.formObj.formItems[item.editFormItemIndex].compType === 'select' ||
                              item.formObj.formItems[item.editFormItemIndex].compType ===
                                'radiogroup' ||
                              item.formObj.formItems[item.editFormItemIndex].compType ===
                                'checkboxgroup')
                          ">
                          <vxe-table border align="center" show-overflow keep-source height="auto" :row-config="{ isCurrent: true }" :data="item.formObj.formItems[item.editFormItemIndex].fieldOptions" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: false }" ref="xTableOptions">
                            <vxe-column type="seq" title="#" width="30"></vxe-column>
                            <vxe-column field="label" title="选项值" :edit-render="{ autofocus: '.vxe-input--inner' }">
                              <template #edit="{ row }">
                                <vxe-input v-model="row.label" type="text"></vxe-input>
                              </template>
                            </vxe-column>
                            <vxe-column field="content" title="选项描述" :edit-render="{ autofocus: '.vxe-input--inner' }">
                              <template #edit="{ row }">
                                <vxe-input v-model="row.content" type="text"></vxe-input>
                              </template>
                            </vxe-column>
                          </vxe-table>
                        </div>
                      </div>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="表单属性">
                      <vxe-form-item title="使用垂直布局" title-overflow field="attrVertical" span="24">
                        <template #default="params">
                          <vxe-checkbox v-model="params.data.attrVertical"></vxe-checkbox>
                        </template>
                      </vxe-form-item>
                    </el-tab-pane> -->
                    <el-tab-pane label="页签属性">
                      <div class="padding-lr-xs">
                        <vxe-form title-width="80px" title-align="left" :data="item">
                          <vxe-form-item title="编码" field="tabKey" span="24">
                            <template #default="params">
                              <vxe-input v-model="params.data.tabKey" style="width: 100%"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="名称" field="tabTitle" span="24">
                            <template #default="params">
                              <vxe-input v-model="params.data.tabTitle" style="width: 100%"></vxe-input>
                            </template>
                          </vxe-form-item>
                          <vxe-form-item title="顺序" field="tabSeq" span="24">
                            <template #default="params">
                              <vxe-input type="integer" v-model="params.data.tabSeq" style="width: 100%"></vxe-input>
                            </template>
                          </vxe-form-item>
                        </vxe-form>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </Pane>
              </Splitpanes>
            </el-tab-pane>
          </el-tabs>
          <div v-if="!dataStruct||dataStruct.length<=0">
            <noData :msg="'暂无配置项'"></noData>
          </div>
        </Pane>
      </Splitpanes>
    </div>
    <el-dialog v-model="isShowTabAddDialog" title="添加属性页签" width="40%">
      <div>
        <el-form label-width="80px" :model="tabObjForm" class="demo-form-inline">
          <el-form-item label="编码">
            <el-input v-model="tabObjForm.tabKey" placeholder="请输入编码" clearable />
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="tabObjForm.tabTitle" placeholder="请输入标题" clearable />
          </el-form-item>
          <el-form-item label="序号">
            <!-- <el-input v-model="tabObjForm.tabSeq" placeholder="请输入序号" clearable /> -->
            <el-input-number v-model="tabObjForm.tabSeq" class="mx-4" :min="1" :max="100" controls-position="right" style="width: 100%" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowTabAddDialog = false">取消</el-button>
          <el-button type="primary" @click="addTab(editableTabsValue)"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, toValue } from 'vue';
import { VXETable, VxeFormPropTypes, VxeFormEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import { Splitpanes, Pane } from 'splitpanes';
import noData from '@/components/NoData.vue';
import { IsEmpty } from '../../utils/common';

const content = ref('业务功能设计');
defineExpose({ toggleDialog });
let { proxy }: any = getCurrentInstance();

interface FormDataVO {
  name: string;
  nickname: string;
  sex: string;
  role: string;
  age: number;
  val1: string[];
  val2: boolean;
  val3: string;
  flag: boolean;
  region: string;
}
const loading = ref(false);
const formData = reactive<FormDataVO>({
  name: '',
  nickname: '',
  sex: '0',
  role: '',
  age: 22,
  val1: [],
  val2: false,
  val3: '',
  flag: false,
  region: ''
});
const isShowTabAddDialog = ref(false);
const moduleMenuList = reactive([]);
let defaultProps = {
  children: 'children',
  label: 'title'
};
const dataTreeRef = ref(null);
const treeloading = ref(false);
const formItems = ref<VxeFormPropTypes.Items>([
  {
    title: '左侧',
    span: 12,
    children: [
      {
        field: 'name',
        title: '属性1',
        span: 24,
        itemRender: { name: '$input', props: { placeholder: '请输入属性1' } }
      },
      {
        field: 'sex',
        title: '属性2',
        span: 12,
        itemRender: {
          name: '$select',
          options: [
            { value: '0', label: '女' },
            { value: '1', label: '男' }
          ],
          props: { placeholder: '请选择属性2' }
        }
      },
      {
        field: 'role',
        title: '属性3',
        span: 12,
        itemRender: { name: '$input', props: { placeholder: '请输入属性3' } }
      },
      {
        field: 'age',
        title: '属性4',
        span: 24,
        itemRender: { name: '$input', props: { type: 'number', placeholder: '请输入属性4' } }
      },
      {
        field: 'val1',
        title: '属性5',
        span: 24,
        itemRender: {
          name: '$checkbox',
          options: [
            { label: '爬山', value: '11' },
            { label: '健身', value: '22' }
          ]
        }
      },
      { field: 'val2', title: '属性6', span: 24, itemRender: { name: '$checkbox' } },
      {
        field: 'val3',
        title: '属性7',
        span: 24,
        itemRender: {
          name: '$radio',
          options: [
            { label: '是', value: 'Y' },
            { label: '否', value: 'N' }
          ]
        }
      },
      {
        field: 'flag',
        title: '属性8',
        span: 24,
        itemRender: { name: '$switch', props: { openLabel: '是', closeLabel: '否' } }
      },
      { field: 'region', title: '属性9', span: 24, itemRender: {}, slots: { default: 'myregion' } }
    ]
  },
  {
    title: '右侧',
    span: 12,
    children: [
      {
        field: 'nickname',
        title: '属性0',
        span: 24,
        itemRender: { name: '$input', props: { placeholder: '请输入属性0' } }
      }
    ]
  },
  {
    align: 'center',
    span: 24,
    itemRender: {
      name: '$buttons',
      children: [
        // { props: { type: 'submit', content: '配置式表单', status: 'primary' } },
        // { props: { type: 'reset', content: '重置' } }
      ]
    }
  },
  {
    align: 'center',
    span: 24,
    children: [
      {
        field: 'remark',
        title: '备注',
        span: 24,
        itemRender: { name: '$textarea', props: { placeholder: '请输入备注' } }
      }
    ]
  }
]);
const tabFormData = reactive({
  code: '',
  name: '',
  seq: 1
});
const dataStruct = ref([]);
const a = ref([
  {
    tabKey: '001',
    tabValue: 0,
    tabTitle: '业务属性',
    tabCode: '001',
    tabSeq: 1,
    editFormItemIndex: 0,
    formObj: {
      formItems: [
        {
          compType: 'input' /*控件类型*/,
          field: 'name' /*字段名*/,
          title: '姓名' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '001' /*属性编号*/,
          fieldSeq: 1 as number /*属性排序码*/,
          span: 24 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: true /*当前编辑*/
        },
        {
          compType: 'checkboxgroup' /*控件类型*/,
          field: 'hobby' /*字段名*/,
          title: '爱好' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '002' /*属性编号*/,
          fieldSeq: 2 as number /*属性排序码*/,
          span: 8 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/,

          fieldSource: '' /*属性数据来源*/,
          fieldOptions: [
            { label: '1', content: '唱歌' },
            { label: '2', content: '跳舞' }
          ] /*属性取值集合*/,
          fieldDefValue: '' /*属性默认取值*/
        },
        {
          compType: 'radiogroup' /*控件类型*/,
          field: 'sex' /*字段名*/,
          title: '性别' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '003' /*属性编号*/,
          fieldSeq: 3 /*属性排序码*/,
          span: 8 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/,

          fieldSource: '' /*属性数据来源*/,
          fieldOptions: [
            { label: '1', content: '男' },
            { label: '2', content: '女' }
          ] /*属性取值集合*/,
          fieldDefValue: '' /*属性默认取值*/
        },
        {
          compType: 'checkbox' /*控件类型*/,
          field: 'isprintdyd' /*字段名*/,
          title: '是否打印导引单' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '004' /*属性编号*/,
          fieldSeq: 4 /*属性排序码*/,
          span: 8 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/,

          fieldSource: '' /*属性数据来源*/,
          fieldOptions: [] /*属性取值集合*/,
          fieldDefValue: '1' /*属性默认取值*/
        },
        {
          compType: 'switch' /*控件类型*/,
          field: 'enable' /*字段名*/,
          title: '启用/禁用' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '005' /*属性编号*/,
          fieldSeq: 5 /*属性排序码*/,
          span: 8 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/,

          fieldSource: '' /*属性数据来源*/,
          fieldOptions: [] /*属性取值集合*/,
          fieldDefValue: '1' /*属性默认取值*/
        },
        {
          compType: 'integer' /*控件类型*/,
          field: 'age' /*字段名*/,
          title: '年龄' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '006' /*属性编号*/,
          fieldSeq: 6 /*属性排序码*/,
          span: 8 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/
        },
        {
          compType: 'select' /*控件类型*/,
          field: 'level' /*字段名*/,
          title: '等级' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '007' /*属性编号*/,
          fieldSeq: 7 /*属性排序码*/,
          span: 8 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/,

          fieldSource: '' /*属性数据来源*/,
          fieldOptions: [
            { label: '1', content: '初级' },
            { label: '2', content: '中级' },
            { label: '2', content: '高级' }
          ] /*属性取值集合*/,
          fieldDefValue: '' /*属性默认取值*/,
          attrCode: '' /*属性编号*/
        },
        {
          compType: 'textarea' /*控件类型*/,
          field: 'remark' /*字段名*/,
          title: '备注' /*标题*/,
          name: '' /*表单名*/,
          fieldCode: '008' /*属性编号*/,
          fieldSeq: 8 /*属性排序码*/,
          span: 24 /*栅格占据的列数（共 24 分栏）*/,
          align: 'left' /*内容对齐方式*/,
          titleAlign: 'left' /*标题对齐方式*/,
          titleWidth: '80px' /*宽度*/,
          titleColon: 0 /*是否显示标题冒号*/,
          titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
          titleOverflow: 1 /*标题内容过长时显示为省略号*/,
          showTitle: 1 /*是否显示标题*/,
          vertical: 0 /*使用垂直布局*/,
          className: '' /*给表单项附加 className*/,
          contentClassName: '' /*给表单项内容附加 className*/,

          visible: 1 /*默认是否显示*/,
          visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
          folding: '' /*默认收起*/,
          collapseNode: '' /*折叠节点*/,
          isCurrent: false /*当前编辑*/
        }
      ],
      formData: {},
      formRule: {},
      span: 24,
      align: '' /*所有项的内容对齐方式*/,
      size: '' /*尺寸*/,
      titleAlign: 'left' /*所有项的标题对齐方式*/,
      titleWidth: '80px' /*所有项的标题宽度*/,
      titleOverflow: 1 /*所有设置标题内容过长时显示为省略号*/,
      vertical: 0 /*所有项使用垂直布局*/,
      className: '' /*给表单附加 className*/,
      titleColon: 0 /*标题 冒号*/
    },
    formData: {
      name: '张三',
      hobby: ['1'],
      age: 55,
      isprintdyd: '1',
      sex: ['2'],
      enable: '1',
      level: '1',
      remark: ''
    }
  }
]);

const formAttrObj = reactive({
  attrCode: '001',
  attrField: 'field001',
  attrTitle: '等级',
  attrSpan: 24,
  attrtitleWidth: 80,
  attrtitleAlign: 'left',
  attrAlign: 'left',
  attrTitleOverflow: true,
  attrShowTitle: true,
  attrVertical: false,
  fieldSource: '3'
});

const tableDataOptions = reactive([
  { label: '1', content: '初级' },
  { label: '2', content: '中级' },
  { label: '3', content: '高级' }
]);

function onMounted() {}
/**
 * 行点击事件
 */
function handleClickType(node) {
  //todo
}
/**
 * 树形 行点击事件
 */
// const path1 = ref('XXX模块');
const path2 = ref('');
const path3 = ref('');
const moduleId = ref('');
const menuId = ref('');
const xTreeModuleMenuRef = ref<VxeTableInstance>();
function treeCellClick({ row }) {
  const $xTable = xTreeModuleMenuRef.value;
  if ($xTable) {
    const r = $xTable.getParentRow(row);
    path2.value = r ? r.title : '';
    path3.value = row ? row.title : '';
    if (row.type == 'module') {
      menuId.value = '';
      moduleId.value = row.id;
    } else if (row.type == 'menu') {
      menuId.value = row.id;
      moduleId.value = row.moduleId;
    }

    findExtenFieldsList();
  }
}
/**
 * 加载模块，菜单
 */
function findModuleMenuList() {
  loading.value = true;
  moduleMenuList.length = 0; //放入数据前清空数据
  const url = '/api/sys/getModuleAndMenuList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { typeFlag: 1 } })
    .then(async (res: any) => {
      moduleMenuList.push(...res.data);
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}
/**
 * 切换弹窗显示隐藏
 */
const dialogVisible = ref(false);
function toggleDialog() {
  dialogVisible.value = !dialogVisible.value;
}
let tabIndex = 3;
const editableTabsValue = ref(0);
const editableTabs = ref([
  {
    title: '扩展属性1',
    name: '1',
    content: 'Tab 1 content'
  },
  {
    title: '扩展属性2',
    name: '2',
    content: 'Tab 2 content'
  },
  {
    title: '扩展属性3',
    name: '3',
    content: 'Tab 2 content'
  }
]);
const tabObjForm = reactive({
  tabKey: '',
  tabTitle: '',
  tabSeq: 0
}); //弹窗添加用
function openTabDialog() {
  isShowTabAddDialog.value = true;
  tabObjForm.tabKey = '';
  tabObjForm.tabTitle = '';
  tabObjForm.tabSeq = dataStruct.value.length;
}
function addTab(targetName: string) {
  const record = {
    tabKey: `${tabObjForm.tabKey}`,
    tabValue: dataStruct.value.length,
    tabTitle: `${tabObjForm.tabTitle}`,
    tabSeq: dataStruct.value.length,
    editFormItemIndex: 0,
    formObj: {
      formItems: [],
      formData: {},
      formRule: {},
      span: 24,
      align: 'left',
      size: '',
      titleAlign: 'right',
      titleWidth: '80px',
      titleOverflow: 1,
      vertical: 0,
      className: '',
      titleColon: 0
    },
    formData: {}
  };
  dataStruct.value.push(record);
  editableTabsValue.value = record.tabValue;
  this.isShowTabAddDialog = false;
}
function tabChange(tabPaneName) {
  editableTabsValue.value = tabPaneName;
}
function saveTab() {
  if (IsEmpty(moduleId.value) || IsEmpty(menuId.value)) {
    VxeMessage('请选择要配置的菜单', VxeNotifyType.warning);
    return;
  }
  const url = '/api/sys/sysextenfields/saveEditExtenFieldsList';
  proxy.$http
    .post(url, { list: dataStruct.value, moduleId: moduleId.value, menuId: menuId.value })
    .then((res: any) => {
      VxeMessage('保存成功', VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage('保存失败', VxeNotifyType.error);
    });
}
function removeTab(targetName) {
  const tabs = dataStruct.value;
  let activeName = editableTabsValue.value;
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.tabValue === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          activeName = nextTab.tabValue;
        }
      }
    });
  }
  const aimIndex = dataStruct.value.findIndex((p) => p.tabValue === targetName);
  editableTabsValue.value = activeName;
  dataStruct.value = dataStruct.value.filter((p) => p.tabValue !== targetName);
}
function addFormItem(compType) {
  try {
    const l = dataStruct.value[editableTabsValue.value].formObj.formItems.length;
    const d = {
      compType: '' /*控件类型*/,
      field: `field${l + 1}` /*字段名*/,
      title: `字段${l + 1}` /*标题*/,
      name: '' /*表单名*/,
      fieldCode: `${l + 1 <= 9 ? '0' + (l + 1) : l + 1}` /*属性编号*/,
      fieldSeq: l + 1 /*属性排序码*/,
      span: 24 /*栅格占据的列数（共 24 分栏）*/,
      align: 'left' /*内容对齐方式*/,
      titleAlign: 'right' /*标题对齐方式*/,
      titleWidth: '80px' /*宽度*/,
      titleColon: 0 /*是否显示标题冒号*/,
      titleAsterisk: 0 /*是否显示必填字段的红色星号*/,
      titleOverflow: 1 /*标题内容过长时显示为省略号*/,
      showTitle: 1 /*是否显示标题*/,
      vertical: 0 /*使用垂直布局*/,
      className: '' /*给表单项附加 className*/,
      contentClassName: '' /*给表单项内容附加 className*/,
      visible: 1 /*默认是否显示*/,
      visibleMethod: '' /*该方法的返回值用来决定该项是否显示*/,
      folding: '' /*默认收起*/,
      collapseNode: '' /*折叠节点*/,
      isCurrent: dataStruct.value[editableTabsValue.value].editFormItemIndex === l ? true : false /*当前编辑*/,
      fieldSource: '' /*属性数据来源*/,
      fieldOptions: [] /*属性取值集合*/,
      fieldDefValue: '' /*属性默认取值*/
    } as any;
    switch (compType) {
      case 'input':
        d.compType = 'input';
        break;
      case 'integer':
        d.compType = 'integer';
        break;
      case 'date':
        d.compType = 'date';
        break;
      case 'checkbox':
        d.compType = 'checkbox';
        break;
      case 'checkboxgroup':
        d.compType = 'checkboxgroup';
        d.fieldSource = '3';
        break;
      case 'radiogroup':
        d.compType = 'radiogroup';
        d.fieldSource = '3';
        break;
      case 'switch':
        d.compType = 'switch';
        break;
      case 'select':
        d.compType = 'select';
        d.fieldSource = '3';

        break;
      case 'textarea':
        d.compType = 'textarea';
        break;
      default:
        break;
    }
    dataStruct.value[editableTabsValue.value].formObj.formItems.push(d);
  } catch (error) {
    //todo
  }
}
function formItemCLick(item, index) {
  dataStruct.value[editableTabsValue.value].editFormItemIndex = index;
  dataStruct.value[editableTabsValue.value].formObj.formItems.forEach((m, i) => {
    if (i === index) {
      m.isCurrent = true;
    } else {
      m.isCurrent = false;
    }
  });
}
function changeEvent(params) {
  //todo
}
interface RowVO {
  label: string;
  content: string;
}
const xTableOptions = ref<VxeTableInstance<RowVO>>();
async function insertEvent(row?: RowVO | number) {
  if (dataStruct.value[editableTabsValue.value].formObj.formItems[dataStruct.value[editableTabsValue.value].editFormItemIndex].fieldOptions) {
    const record = {
      label: '',
      content: ''
    } as RowVO;
    dataStruct.value[editableTabsValue.value].formObj.formItems[dataStruct.value[editableTabsValue.value].editFormItemIndex].fieldOptions.push(record);
  } else {
    dataStruct.value[editableTabsValue.value].formObj.formItems[dataStruct.value[editableTabsValue.value].editFormItemIndex].fieldOptions = [];
    const record = {
      label: '',
      content: ''
    } as RowVO;
    dataStruct.value[editableTabsValue.value].formObj.formItems[dataStruct.value[editableTabsValue.value].editFormItemIndex].fieldOptions.push(record);
  }
}
function removeSelectRowEvent() {
  const $table = xTableOptions.value;
  if ($table) {
    $table[0].removeCurrentRow();
  }
}
//重新排序
function sortAgain() {
  dataStruct.value[editableTabsValue.value].formObj.formItems.sort((a, b) => Number(a.fieldSeq) - Number(b.fieldSeq));
}
function findExtenFieldsList() {
  const url = '/api/sys/sysextenfields/findEditExtenFieldsList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { moduleId: moduleId.value, menuId: menuId.value } })
    .then((res: any) => {
      dataStruct.value.length = 0;
      res.data.forEach((e: any) => {
        e.formObj.titleColon = 0;
        e.formData = {} as any;
        dataStruct.value.push(e);
      });
      editableTabsValue.value = 0;
    })
    .catch((err: any) => {
      VxeMessage('获取字典分类列表失败', VxeNotifyType.error);
    });
}
//
findModuleMenuList();
</script>
<style lang="scss" scoped>
#buspagedesigner {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .tablecenter {
      height: 100%;
    }
  }
}
:deep(.splitpanes) {
  height: 100%;

  .splitpanes__pane {
    background-color: $base-white;
  }
}

:deep(.el-tabs) {
  height: 100%;
  border: none;

  .el-tabs__content {
    height: calc(100% - 100px);
    padding: 0;
  }
}

:deep(.el-tab-pane) {
  height: 100%;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.deleteValueBtn {
  margin-right: 10px;
}
</style>
